<!--
* @description 帖子详情
* @fileName bbs_detail.vue
* @author huangyu
* @date 2023/04/21 09:25:17
!-->
<template>
    <div class="bbsContainer">
        <div class="bbsContent">
            <div class="bbsUserContent">
                <el-container>
                    <el-aside width="280px">
                        <div class="title title2">回复数：<strong class="color_danger">{{total}}</strong></div>
                        <div class="content" v-if="pageindex==1">
                            <div class="gameName">{{model.gameName}}</div>
                            <div class="userImage">
                                <el-image :src="model.image" fit="contain" style="width:88px;height:88px;border:50%;border:1px solid #ddd;">
                                    <div slot="error">
                                        <el-image fit="contain" src="/game/images/game/zhuxian/userImage.png"></el-image>
                                    </div>
                                </el-image>
                            </div>
                            <div v-if="token">qq：{{!model.isSecrecy?model.qq:'保密'}}</div>
                            <div v-else>登录后可查看</div>
                        </div>
                    </el-aside>
                    <el-main>
                        <h1 class="title" style="font-size:16px;">
                            {{model.title}}
                            <a href="javascript:;" @click="clickMyBbs" style="text-decoration:underline;float:right;margin-right:20px;" v-if="isLookMy">只看自己</a>
                            <a href="javascript:;" @click="clickMyBbsNo" style="text-decoration:underline;float:right;margin-right:20px;" v-else>取消只看自己</a>
                        </h1>
                        <div class="content borderBg" v-if="pageindex==1">
                            <div class="time">
                                发表于：{{model.create_time | formatDate}} | 楼主   
                                <strong v-if="model.userId==token" style="cursor:pointer;" @click="clickEditContent" class="color_blue">重新编辑</strong>
                            </div>
                            <div class="htmlContent" v-html="model.content"></div>
                        </div>
                    </el-main>
                </el-container>
            </div>

            <!-- 回复循环 -->
            <div class="bbsUserContent">
                <el-container v-for="(item,index) in model.replyList" :key="index">
                    <el-aside width="280px">
                        <div class="content">
                            <div class="gameName">{{item.gameName}}</div>
                            <div class="userImage">
                                <el-image :src="item.image" fit="contain" style="width:88px;height:88px;border:50%;border:1px solid #ddd;">
                                    <div slot="error">
                                        <el-image fit="contain" src="/game/images/game/zhuxian/userImage.png"></el-image>
                                    </div>
                                </el-image>
                            </div>
                            <div v-if="token">qq：{{!item.isSecrecy?item.qq:'保密'}}</div>
                            <div v-else>登录后可查看</div>
                        </div>
                    </el-aside>
                    <el-main>
                        <div class="content borderBg">
                            <div class="time">
                                发表于：{{item.create_time | formatDate}} | {{pageindex>1?(pageindex-1)*pagesize+index+1:index+1}}楼
                                <strong v-if="item.userId==token" style="cursor:pointer;" @click="clickEditReplyContent(item)" class="color_blue">重新编辑</strong>
                                <strong v-if="powerRoleAdmin||item.userId==token" @click="clickReplyContent(item._id)" class="color_danger" style="margin-left:10px;">删除</strong>
                            </div>
                            <div class="htmlContent" v-html="item.content"></div>
                        </div>
                        <!-- 留言列表 -->
                        <div class="messageContent" v-if="item.messageList.length>0">
                            <div v-for="(message,index2) in item.messageList" :key="index2" class="messageList">
                                <span class="color_blue">{{message.gameName}}</span> <span v-if="message.toUserId">回复: </span> <span class="color_blue">{{message.toGameName}}</span>: {{message.content}}
                                <el-popover
                                placement="bottom-start"
                                width="400"
                                trigger="click">
                                    <div>
                                        <el-input type="textarea" v-model="message.messageContent"></el-input>
                                        <el-button size="mini" type="primary" style="margin-top:10px;" @click="submitToUserMessage(item,message)">确认</el-button>
                                    </div>
                                    <span slot="reference" class="linkHuiFu color_blue" v-if="token!=message.userId">回复</span>
                                </el-popover>
                            </div>
                        </div>
                        <!-- 提交留言 -->
                        <div style="padding:10px 20px">
                            <el-popover
                            placement="bottom-start"
                            width="400"
                            trigger="click">
                                <div>
                                    <el-input type="textarea" v-model="item.userContent"></el-input>
                                    <el-button size="mini" type="primary" style="margin-top:10px;" @click="submitUserReply(item)">确认</el-button>
                                </div>
                                <el-button slot="reference" size="mini" type="primary" plain>留言</el-button>
                            </el-popover>
                        </div>
                    </el-main>
                </el-container>
            </div>

        </div>

        <!-- 翻页 -->
        <el-container>
            <el-aside width="280px" style="background:#fff;border-right:none;">
                <div class="content" style="text-align:center;">
                    <router-link :to="`/game/zx/bbs`"><el-button type="primary" style="margin-top:12px;">返回列表</el-button></router-link>
                </div>
            </el-aside>
            <el-main>
                <div class="content borderBg" style="padding:0;">
                    <pagination
                    :total="total"
                    :current-page="pageindex"
                    :display="pagesize"
                    @pagechange="pagechange"
                    style="margin-top:0;margin-left:-280px;"
                    ></pagination>
                </div>
            </el-main>
        </el-container>

        
        <!-- 最底部回复 -->
        <el-container style="border:1px">
            <el-aside width="280px">
                <div class="content"></div>
            </el-aside>
            <el-main>
                <div class="content borderBg">
                    <div style="margin-top:40px;">
                        <el-form  label-width="100px" ref="refsForm" v-if="!model.isStop">
                            <el-form-item label="回复内容">
                                <wangEditor v-model="replyForm.content" :isClear="false" :height="120"></wangEditor>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitBottomReply">保存</el-button>
                            </el-form-item>
                        </el-form>
                        <div v-else>已停止回复消息</div>
                    </div>
                </div>
            </el-main>
        </el-container>

        <!-- 编辑帖子内容 -->
        <el-dialog :visible.sync="dialogEditContent" title="重新编辑帖子内容" width="1080px" v-dialogDrag top="50px">
            <wangEditor v-model="editModel.content" :id="'editContent'" :isClear="false" :height="520"></wangEditor>
            <el-button style="margin-top:20px;" type="primary" @click="submitEditContent">保存</el-button>
        </el-dialog>

        <!-- 编辑帖子回复内容 -->
        <el-dialog :visible.sync="dialogEditReplyContent" title="重新编辑帖子回复内容" width="1080px" v-dialogDrag top="50px">
            <wangEditor v-model="editReplyModel.content" :id="'editReplyContent'" :isClear="false" :height="320"></wangEditor>
            <el-button style="margin-top:20px;" type="primary" @click="submitEditReplyContent">保存</el-button>
        </el-dialog>

    </div>
</template>

<script>
import { get } from '@/common/app.js'
import pagination from "@/components/common/pagination.vue";
import { formatDate } from '@/common/unit.js'
import wangEditor from "@/components/system/wangEditor.vue"

export default {
    components: { pagination,wangEditor },
    data() {
        return {
            token: this.$store.state.token,
            id: this.$route.query.id,
            userId: this.$store.state.user.userId,
            model: {
                title: ""
            },
            replyForm: {
                content: "",
            },
            userReplyForm:{},
            pageindex: 1,
            pagesize: 20,
            total: 0,
            dialogUserReply: false,
            row: {},
            isLookMy: true,

            dialogEditContent: false,
            editModel: {},
            dialogEditReplyContent: false,
            editReplyModel: {},

            powerRoleAdmin: this.$power.roleAction('管理员'),
        }
    },
    mounted() {
        if(this.id){
            this.getData()
        }
    },
    methods: {
        clickMyBbsNo(){
            this.isLookMy = true
            this.getData()
        },
        clickMyBbs(){
            this.isLookMy = false
            this.getData(this.userId)
        },
        clickReplyContent(_id){
            this.$confirm("确定要删除吗?", "提示").then(() => {
                let params = {
                    type: 'getBbs',
                    api: 'api-bbs-update',
                    data: {
                        _id: _id,
                        type: 'replyDel',
                    },
                }
                get('game', params).then(res => {
                    if (res) {
                        this.$message.success("删除成功!")
                        this.getData()
                    }
                })
            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            });
        },
        submitEditReplyContent(){
            let params = {
                type: 'getBbs',
                api: 'api-bbs-update',
                data: {
                    _id: this.editReplyModel._id,
                    type: 'replyContent',
                    content: this.editReplyModel.content,
                },
            }
            get('game', params).then(res => {
                if (res) {
                    this.dialogEditContent = false
                    this.$message.success("编辑成功!")
                    this.getData()
                }
            })
        },
        clickEditReplyContent(item){
            this.editReplyModel = {...item}
            this.dialogEditReplyContent = true
        },
        submitEditContent(){
            let params = {
                type: 'getBbs',
                api: 'api-bbs-update',
                data: {
                    _id: this.id,
                    type: 'content',
                    content: this.editModel.content,
                },
            }
            get('game', params).then(res => {
                if (res) {
                    this.dialogEditContent = false
                    this.$message.success("编辑成功!")
                    this.getData()
                }
            })
        },
        clickEditContent(){
            this.editModel = {...this.model}
            this.dialogEditContent = true
        },
        getData(userId){
            let params = {
                type: 'getBbs',
                api: 'api-bbs-detail2',
                data: {
                    _id: this.id,
                    userId: userId,
                    pageIndex: this.pageindex,
                    pageSize: this.pagesize,
                },
            }
            get('game', params).then(res => {
                if (res) {
                    console.log(res)
                    this.model = res.data
                    this.total = res.total
                }
            })
        },
        pagechange: function(currentPage) {
            this.pageindex = currentPage;
            this.getData();
        },
        // 留言
        submitUserReply(item){
            if(this.token){
                let params = {
                    type: 'getBbs',
                    api: 'api-bbs-reply-user-add',
                    token: this.token,
                    data: {
                        replyId: item._id,
                        content: item.userContent,
                    },
                }
                get('game', params).then(res => {
                    if (res) {
                        this.$message.success("留言成功")
                        this.getData()
                    }
                })
            }else{
                this.$message.error("请先登录！")
            }
        },
        // 回复某个人
        submitToUserMessage(item,message){
            if(this.token){
                let params = {
                    type: 'getBbs',
                    api: 'api-bbs-reply-user-add',
                    token: this.token,
                    data: {
                        replyId: item._id,
                        cBbsId: this.id,
                        toUserId: message.userId,
                        content: message.messageContent,
                    },
                }
                // console.log(params)
                get('game', params).then(res => {
                    if (res) {
                        this.$message.success("留言成功")
                        this.getData()
                    }
                })
            }else{
                this.$message.error("请先登录！")
            }
        },
        // 最底部回复
        submitBottomReply(){
            if(this.token&&this.id){
                  let params = {
                    type: 'getBbs',
                    api: 'api-bbs-reply-add',
                    token: this.token,
                    data: {
                        _id: this.id,
                        content: this.replyForm.content
                    },
                }
                get('game', params).then(res => {
                    if (res) {
                        this.$message.success("回复成功")
                        this.getData()
                        this.replyForm.content = ""
                        // console.log(res)
                    }
                })  
            }else{
                this.$message.error("请先登录!")
            }
        },
        
    },
    filters: {
        formatDate(time) {
            var date = new Date(time);
            let res = formatDate(date, "yy-MM-dd hh:mm:ss");
            return res;
        },
    }
}
</script>

<style scoped>

</style>